<template>
  <el-dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    :width="width"
    :append-to-body="appendToBody"
    :close-on-click-modal="false"
  >
    <slot></slot>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" @click="onConfirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    dialogVisible: boolean;
    dialogTitle: string;
    width?: string | number;
    appendToBody?: boolean;
  }>(),
  {
    dialogVisible: false,
    width: "50%",
    appendToBody: false,
  }
);
const emit = defineEmits<{
  (e: "update:dialogVisible", value: boolean): void;
  (e: "onConfirm"): void;
  (e: "onCancel"): void;
}>();
const onCancel = (): void => {
  emit("onCancel");
  emit("update:dialogVisible", false);
};
const onConfirm = (): void => {
  emit("onConfirm");
  emit("update:dialogVisible", false);
};
</script>
<style lang="scss" scoped></style>
